<template>
  <div class="big">
    <van-sticky>
      <div class="header">
        <van-icon name="arrow-left" @click="$router.push({ name: 'home' })" />
        <van-search placeholder="请输入商家名、品类或者商圈..." />
        <i class="iconfont icon-touxiang" @click="skip"></i>
      </div>
    </van-sticky>
    <div class="banar-img">
      <van-image width="100%" height="100%" fit="contain" :src="imgUrl" />
    </div>
    <van-grid :gutter="10">
      <van-grid-item
        v-for="value in kind"
        :key="value"
        :icon="value.icon"
        :text="value.text"
      />
    </van-grid>
    <van-sticky :offset-top="50">
      <van-dropdown-menu active-color="#1989fa">
        <van-dropdown-item
          v-model="value1"
          :options="option1"
          title="全部类目"
        />
        <van-dropdown-item
          v-model="value2"
          :options="option2"
          title="附近商家"
        />
        <van-dropdown-item
          v-model="value3"
          :options="option3"
          title="智能排序"
        />
        <van-dropdown-item title="筛选" ref="item">
          <van-cell center title="节假日可用">
            <template #right-icon>
              <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
            </template>
          </van-cell>
          <van-cell center title="只看免预约">
            <template #right-icon>
              <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
            </template>
          </van-cell>
          <div style="padding: 5px 16px">
            <van-button type="danger" block round @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </van-sticky>
    <lists></lists>
  </div>
  <foodfoot></foodfoot>
</template>
<script>
import { defineComponent } from 'vue'

import lists from '@/components/foodlist/foodContent.vue'
import foodfoot from '@/components/foodlist/foodListfoot.vue'
export default defineComponent({
  components: {
    lists,
    foodfoot
  },
  methods: {
    skip() {
      console.log(1)
    },
    onConfirm() {
      console.log(1)
    }
  },
  data() {
    return {
      kind: [
        { icon: 'fire', text: '火锅' },
        { icon: 'like', text: '甜点饮品' },
        { icon: 'cart', text: '自助餐' },
        { icon: 'gold-coin', text: '小吃快餐' },
        { icon: 'bill', text: '西餐' },
        { icon: 'hot', text: '烧烤烤肉' },
        { icon: 'new', text: '香锅烤鱼' },
        { icon: 'good-job', text: '海鲜' }
      ],
      imgUrl:
        'https://s3plus.meituan.net/v1/mss_20cf2cb609bf414daf70e3738dd9eeab/meituan-web-meishife-mobile-img/app_download_banner.png',
      option1: [
        { text: '全部商品', value: 0 },
        { text: '火锅', value: 1 },
        { text: '烧烤烤串', value: 2 },
        { text: '自助餐', value: 3 },
        { text: '饮品店', value: 4 },
        { text: '面包甜点', value: 5 },
        { text: '小吃快餐', value: 6 },
        { text: '川湘菜', value: 7 },
        { text: '特色菜', value: 8 },
        { text: '烤肉', value: 9 }
      ],
      option2: [
        { text: '市北区', value: 0 },
        { text: '市南区', value: 1 },
        { text: '李沧区', value: 2 },
        { text: '崂山区', value: 3 },
        { text: '黄岛区', value: 4 },
        { text: '城阳区', value: 5 },
        { text: '即墨市', value: 6 },
        { text: '胶州市', value: 7 },
        { text: '平度市', value: 8 },
        { text: '莱西市', value: 9 }
      ],
      option3: [
        { text: '离我最近', value: 'a' },
        { text: '好评优先', value: 'b' },
        { text: '人气最高', value: 'c' }
      ],
      value1: 0,
      value2: 1,
      value3: 2,
      switch1: 'a',
      switch2: 'b'
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/iconfont/iconfont.css';
.big {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.header {
  width: 100%;
  height: 0.5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #dadcd4;
  position: sticky;
  top: 0;
  z-index: 1000;
  .van-search {
    width: 3rem;
    height: 0.3rem;
    border-radius: 0.3rem;
    overflow: hidden;
    background-color: #f7f8fa;
  }
  .van-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 0.05rem;
    color: orange;
  }
  .icon-touxiang {
    display: flex;
    justify-content: center;
    align-items: center;
    color: orange;
    padding-right: 0.05rem;
  }
}
.van-grid-item {
  color: rgb(186, 80, 80);
}
.big {
  border-color: red;
}
</style>
